import type { BaseGuessInstance } from '@/types/component'
import { ref } from 'vue'

/**
 * 猜你喜欢组合式函数
 */
export const useGuessLike = () => {
  // 获取猜你喜欢组件实例
  const guessLikeRef = ref<BaseGuessInstance>()

  // 滚动触底触发，加载更多数据
  const onScrolltolower = () => {
    guessLikeRef.value?.getMore()
  }

  return {
    guessLikeRef,
    onScrolltolower,
  }
}

/**
 * 骨架屏组合式函数
 */
export const useSkeleton = () => {
  // 骨架屏是否显示
  const isShowSkeleton = ref<boolean>(false)

  // 骨架屏控件，传入一个异步的回调函数，通常是获取数据的逻辑，获取成功前打开骨架屏，获取成功后关闭骨架屏
  const skeletonController = async (callback: () => void) => {
    isShowSkeleton.value = true
    // 回调函数：获取数据逻辑，获取数据成功后，隐藏骨架屏
    await callback()
    isShowSkeleton.value = false
  }

  return {
    isShowSkeleton,
    skeletonController,
  }
}

/**
 * scroll-view组件下拉刷新组合式函数
 */
export const useScrollViewRefresh = () => {
  // 下拉刷新是否被触发，默认为 false-未触发，触发式会打开刷新动画
  const isTriggered = ref<boolean>(false)
  /**
   * refreshController是一个下拉刷新控制器，传入一个异步的回调函数，通常是获取数据的逻辑，
   * 获取数据前，isTriggered置为true，刷新动画打开，获取成功后，isTriggered置为false，关闭下拉刷新
   */
  const refreshController = async (callback: () => void) => {
    isTriggered.value = true
    await callback()
    isTriggered.value = false
  }

  return {
    isTriggered,
    refreshController,
  }
}
